<template>
  <div class="p-20 w-100 h-100">
    <dynamicTable
      :table-head="tableHead"
      :table-data="tableData"
      :is-disable="false"
    />
  </div>
</template>
<script>
import routeData from "./route.js";
import dynamicTable from "@/components/dynamic-table";
export default {
  components: {
    dynamicTable,
  },
  data() {
    return {
      tableHead: [],
      tableData: [],
    };
  },
  methods: {
    // 组装表头
    createTableHead() {
      routeData.routeSegmentList.forEach((item, index) => {
        const form = {};
        form.label = item.startNode.nodeName;
        form.props = item.segmentId;
        form.type = 1;
        form.startNodeCategory = item.startNodeCategory;
        form.width = "120px";
        form.segmentId = item.segmentId;
        form.subLabel = [
          {
            label: "A向端口",
            props: item.segmentId + "startBeforePortId",
          },
          {
            label: "Z向端口",
            props: item.segmentId + "startAfterPortId",
          },
        ];
        this.tableHead.push(form);

        // 存在纤芯
          if (item.cableId != null && item.cableId != '') {
            const form5 = {}
            form5.label = item.cableName
            form5.props = item.segmentId + 'fiberName'
            form5.width = ''
            form5.type = 2
            form5.subLabel = []
            this.tableHead.push(form5)
          }

          if (routeData.routeSegmentList.length - 1 == index) {
            const forms = {}
            forms.label = item.endNode.nodeName
            forms.props = item.segmentId
            forms.type = 1
            forms.startNodeCategory = item.endNodeCategory
            forms.width = '120px'
            forms.segmentId = item.segmentId
            forms.subLabel = [
              {
                label: 'A向端口',
                props: item.segmentId + 'endBeforePortId'
              },
              {
                label: 'Z向端口',
                props: item.segmentId + 'endAfterPortId'
              }
            ]
            this.tableHead.push(forms)
            console.log('tableHead', this.tableHead)
          }
      });
    },
    // 组装表格数据
    createTableData() {
      this.tableData = []
      routeData.routeChannelsVoList.forEach((item, index) => {
        const formData = {}
        item.channels.forEach((temp, tempIndex) => {
          // 存在纤芯
          if (temp.fiberName != null || temp.fiberName != '') {
            formData[temp.segmentId + 'fiberName'] = '纤芯' + temp.fiberName
          }
          formData[temp.segmentId + 'startAfterPortId'] =
            temp.startAfterPortName
          formData[temp.segmentId + 'startBeforePortId'] =
            temp.startBeforePortName
          if (tempIndex == item.channels.length - 1) {
            formData[temp.segmentId + 'endAfterPortId'] = temp.endAfterPortName
            formData[temp.segmentId + 'endBeforePortId'] =
              temp.endBeforePortName
          }
        })
        formData.channelStatus = item.status
        const indexs = index + 1
        formData.channelName = '通道' + indexs
        this.tableData.push(formData)
      })
      console.log(this.tableData)
    },
  },
  mounted() {
    this.createTableHead()
    this.createTableData()
  }
};
</script>
